<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Cache-Control" content="no-cache, no-store"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>谷歌地图</title>
    <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
    <%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
        String projectPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
    %>
    <%--项目路径 --%>
    <c:set var="basePath" value="<%=projectPath%>"></c:set>
    <c:set var="ctx" value="${pageContext.request.contextPath}"/>
    <link rel="stylesheet" href="${ctx}/map/css/gh-buttons.css">
    <script type="text/javascript" src="${ctx}/map/js/public/util.js"></script>
    <style>
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0 auto;
        }

        .datatable {
            font-size: 12px;
            display: none;
        }

        .button {

        }

        .maptable td {
            border: 0px;
            padding: 2px;
            color: #0099FF;
            font-size: 13px;
        }

        .tdheader {
            text-align: right;
            color: #000000 !important;
        }

        .labels {
            color: blue;
            fontSize: 12px;
            height: 20px;
            border: 0;
            background: #CCFFCC;
            lineHeight: 20px;
            fontFamily: "微软雅黑"
        }

        .labels1 {
            color: blue;
            fontSize: 12px;
            height: 20px;
            border: 0;
            lineHeight: 20px;
            fontFamily: "微软雅黑";
            padding-left: 50px;
        }

        .fontClass {
            color: blue
        }

        .gmnoprint {
            display: none;
        }
    </style>
    <%--<script src="https://ditu.google.cn/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc"></script>--%>
    <%--<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyBpiFatjM3XBf7ddPC5lTyKC4Xye3xqHaU&language=zh-CN&libraries=drawing"></script>--%>
    <!-- 中国版 -->
    <%--<script src="http://ditu.google.cn/maps?file=api&hl=zh-CN&v=2&key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc"></script>--%>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
</head>
<body>
<div style="position: absolute; right: 1px; top: 1px; z-index: 9999">
    <ul class="button-group">
        <li><a href="#" class="button" id="panelTool" title="拖动地图">
            <img src="${ctx}/map/images/toolbar/hand.gif" style="height: 16px"/></a></li>
        <li><a href="#" class="button" id="rectZoomoutTool" title="矩形缩小">
            <img src="${ctx}/map/images/toolbar/zoomout.gif"/></a></li>
        <li><a href="#" class="button" id="rectZoominTool" title="矩形放大">
            <img src="${ctx}/map/images/toolbar/zoomin.gif"/></a></li>
        <li><a href="#" class="button" id="measureTool" title="测距">
            <img src="${ctx}/map/images/toolbar/measure.png"/></a></li>
        <li><a href="#" class="button" id="measureToolClean" title="清除测距">
            <img src="${ctx}/map/images/toolbar/clean.gif"/></a></li>
        <%--		<li><a href="#" class="button" id="rectQueryTool" title="矩形查设备">
            <img src="<%=mapPath%>/images/toolbar/rectQuery.png"/></a></li> --%>
        <li><a href="#" class="button" id="markerTool" title="标注">
            <img src="${ctx}/map/images/toolbar/marker.png"/></a></li>
        <li><a href="#" class="button" id="rectTool" title="矩形区域">
            <img src="${ctx}/map/images/toolbar/rect.png"/></a></li>
        <li><a href="#" class="button" id="circleTool" title="圆形区域">
            <img src="${ctx}/map/images/toolbar/circle.png"/></a></li>
        <li><a href="#" class="button" id="polygonTool" title="多边形区域">
            <img src="${ctx}/map/images/toolbar/polygon.png"/></a></li>
        <%--	<li><a href="#" class="button" id="polylineTool" title="线路">
            <img src="${ctx}/map/images/toolbar/polyline.png"/></a></li>
        <li><a href="#" class="button" id="keyPointTool" title="关键点">
                <img src="<%=mapPath%>/images/toolbar/keypoint.png"/></a></li> --%>
        <li><a href="#" class="button" id="saveTool" title="保存中心兴趣点">
            <img src="${ctx}/map/images/toolbar/point.png" style="height: 16px"/></a></li>
        <%--	<li><a href="#" class="button" id="showAllTool" title="显示所有设备">
            <img src="<%=mapPath%>/images/toolbar/showAll.png"/></a></li>   --%>
    </ul>
</div>
<div id="allmap">
</div>
<script type="text/javascript" src="${ctx}/js/jquery/jquery1.8.min.js"></script>
<script type="text/javascript" src="${ctx}/map/MapHandler.js"></script>
<%--<script type="text/javascript" src="${ctx}/map/GoogleMapHandler.js?v=10"></script>--%>
<%--<script type="text/javascript" src="${ctx}/map/google/js/markerclusterer.js"></script>--%>
<%--<script type="text/javascript" src="${ctx}/map/google/js/markerwithlabel.js"></script>--%>
<%--<script type="text/javascript" src="${ctx}/map/google/js/infobubble.js"></script>--%>
<%--<script type="text/javascript" src="${ctx}/map/google/js/distance.js"></script>--%>
<link type="text/css" href="${ctx}/topjui/css/topjui.core.min.css" rel="stylesheet">
<link type="text/css" href="${ctx}/topjui/themes/default/topjui.bluelight.css" rel="stylesheet" id="dynamicTheme"/>
<!-- FontAwesome字体图标 -->
<link type="text/css" href="${ctx}/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
<script type="text/javascript" src="${ctx}/static/public/js/topjui.config.js"></script>
<!-- TopJUI框架核心 -->
<script type="text/javascript" src="${ctx}/topjui/js/topjui.core.min.js"></script>
<!-- TopJUI中文支持 -->
<script type="text/javascript" src="${ctx}/topjui/js/locale/topjui.lang.zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/static/plugins/jquery/jquery.mousewheel.js"></script>
<script type="text/javascript">
    var path = "${ctx}";
    var map = null;
    var OperatorObj = null;
    var mapTool = "queryRect"; //矩形工具，用来区分是矩形查询车辆，还是矩形区域画图 query和draw
    var url = 'http://mt0.google.cn/vt/lyrs=s@124&scale=5&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}';
    var url1 = 'http://mt0.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}';
    $(function () {
        //当前登录用户信息
        var userInfo = window.parent.userInfo;//用户设置的地图中心
        var lat = userInfo.latitude, lng = userInfo.longitude, zoom = 10;
        var mapOptions = {
            center: [lat, lng],
            zoom: zoom,
            zoomDelta: 0.5,
            fullscreenControl: false,
            zoomControl: false,
            attributionControl: false
        }

        map = L.map('allmap',mapOptions);
        new L.TileLayer(url, {}).addTo(map);
        if (url1) {
            new L.TileLayer(url1, {}).addTo(map)
        }

        OperatorObj = new MapHandler(map, path + '/map');

    });


</script>
</body>
</html>
